<template>
  <div class="content">
    <div class="header_box">
      <div class="header_left">私有协议信息</div>
      <div class="header_right">
        <el-form :inline="true" :model="searFrom" class="form_box">
          <el-form-item>
            <el-input
              v-model="searFrom.username"
              placeholder="IP"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toInfo">新增</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toInfo">新增节点</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toInfo">新增节点组</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
      max-height="500"
    >
      <el-table-column type="index" :index="indexMethod" />
      <el-table-column prop="fullName" label="IP" />
      <el-table-column prop="code" label="产品名称" />
      <el-table-column prop="code" label="国家" />
      <el-table-column prop="code" label="指纹策略" />
      <el-table-column prop="code" label="指定节点或节点组" />
      <el-table-column prop="code" label="默认价格" />
      <el-table-column prop="code" label="支付流程" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="icon_content">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <div class="icon_box">
                <el-icon @click="edit(row)" size="20" color="#71778d"
                  ><EditPen
                /></el-icon>
              </div>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <div class="icon_box_d">
                <el-icon @click="remove(row)" size="20" color="#71778d"
                  ><Remove
                /></el-icon>
              </div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination
        v-model:current-page="searFrom.pageNo"
        v-model:page-size="searFrom.pageSize"
        :page-sizes="[10, 50, 100, 150]"
        :small="small"
        :disabled="false"
        :background="true"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { defineOptions, ref, onBeforeMount } from "vue";
import * as userApi from "../../api/project1/user/user.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
defineOptions({ name: "UserList" });

let tableData = ref([
  {
    username: "dayu",
    fullName: "jw",
    email: "2045279876@qq.com",
    phone: "18946873767",
    birthDate: "2021-01-05 9:00:00",
    address: "深圳市宝安区",
    createdAt: "2021-01-05 9:00:00",
  },
]);

let searFrom = ref({
  username: "",
  email: "",
  password: "",
  fullName: "",
  birthDate: null,
  gender: "",
  address: "",
  phone: "",
  openId: "",
  isActive: 1,
  userRole: "",
  pageNo: 1,
  pageSize: 10,
});

let total = ref(0);

let roleLabels = ref({
  0: "后台超级管理员",
  1: "后台管理员",
  2: "后台用户",
  3: "小程序用户",
});

const router = new useRouter();

const init = async () => {
  const res = await userApi.page(searFrom.value);
  const { records } = res;
  tableData.value = records;
  total.value = res.total;
};
const change = async (e) => {
  // const res = await userApi.saveOrUpate(e);
  // const { code ,msg } = res;
  // if(code !== '200'){
  //     ElMessage.error(msg)
  //     return
  // }
  // ElMessage.success('操作成功')
};

const toInfo = () => {
  router.push({
    name: "userInfo",
  });
};

onBeforeMount(() => {
  //  init()
});
</script>
<style lang="less" scoped>
.header_left {
  border-radius: 15px 0px 0px 0px;
  font-weight: 800;
}
.header_right {
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
}
:deep(.form_box) {
  width: 80%;
  height: 40%;
  margin: 0px;
  display: flex;
  justify-content: flex-end;
}
</style>